<template>
    <article class="public-header-content">
        <div class="container">
            <div class="header">
                <i></i>客户购房能力
            </div>
            <a-row class="content clearfix" :gutter="30" type="flex" justify="center" style="margin: 0">
                <a-col :span="12" class="left-box">
                    <h3>计算条件</h3>
                    <article>
                        <aside>
                            <h5 class="left">持有资金（￥）</h5>
                            <div class="right">
                                <a-input-number v-model="holdMmoney" prefix="iconfont icon-dkw_daikuan-"></a-input-number>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">家庭月收入（￥）</h5>
                            <div class="right">
                                <a-input-number v-model.number="familyMonthlyIncome" prefix="iconfont icon-baifenbi"></a-input-number>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">家庭平均每月支出（￥）</h5>
                            <div class="right">
                                <a-input-number v-model.number="familyAverageMonthSpending" prefix="iconfont icon-icon_lishuaipeizhi"></a-input-number>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">贷款计划</h5>
                            <div class="right">
                                <a-select v-model="loanPlan" allowClear showSearch placeholder="请选择贷款计划" @change="loanPlanChange" style="width: 100%;" >
                                    <a-select-option value="30">30年固定利率(360期)</a-select-option>
                                    <a-select-option value="20">20年固定利率(240期)</a-select-option>
                                    <a-select-option value="15">15年固定利率(180期)</a-select-option>
                                </a-select>
                            </div>
                        </aside>
                        <aside>
                            <h5 class="left">所需房屋面积（m²）</h5>
                            <div class="right">
                                <a-input-number v-model.number="requiredHouseArea" prefix="iconfont icon-icon_lishuaipeizhi"></a-input-number>
                            </div>
                        </aside>
                    </article>
                </a-col>
                <a-col :span="12" class="right-box">
                    <h3>匹配结果</h3>
                    <div class="chart-div" id="pieChart-client-purchase-house-Ability"></div>
                </a-col>
            </a-row>
        </div>


        <p v-show="false">{{getHousePrice}}</p>

    </article>
</template>

<script>
    export default {
        data() {
            return {
                myEcharts: null,
                holdMmoney: '',//持有资金（￥）
                familyMonthlyIncome: '',//家庭月收入（￥）
                familyAverageMonthSpending: '',//家庭平均每月支出（￥）
                loanPlan: '30',//贷款计划
                requiredHouseArea: '',//所需房屋面积（m²）




            }
        },
        computed: {
            //从state获取房源价钱数据
            getHousePrice() {
                if(this.$store.getters.get_housePrice){
                    this.get_loancalc();
                }
                return this.$store.getters.get_housePrice
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('pieChart-client-purchase-house-Ability'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });

        },
        methods: {
            //计算客户购房能力
            get_loancalc() {
                this.$nextTick(() => {
                    this.client_purchase_house_Ability_echarts(3140975, 20939)
                });
            },
            //贷款计划变化
            loanPlanChange(value) {
                // 计算还款月数
                // this.monthsNumber = parseFloat(value) * 12;
                this.get_loancalc()
            },
            //客户购房能力——饼图
            client_purchase_house_Ability_echarts(Can_buy_house_total_price, Can_buy_house_unit_price){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    legend: {
                        orient: 'vertical',
                        right: '30',
                        top: '0',
                        data: ['可购买房屋总价', '可购买房屋单价']
                    },
                    series: [{
                        type: 'pie',
                        radius: ['25%', '65%'],//圆的内外半径
                        center: ['45%', '55%'],//圆的X,Y轴平移
                        data: [
                            {
                                value: Can_buy_house_total_price,
                                name: '可购买房屋总价',
                                itemStyle: {//圆形颜色
                                    normal: {color: '#00b8ee'}
                                }
                            },
                            {
                                value: Can_buy_house_unit_price,
                                name: '可购买房屋单价',
                                itemStyle: {
                                    normal: {color: '#fe9e25'}
                                }
                            },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                formatter: (param) => {
                                    return param.name + '：' + this.$accounting.formatMoney(param.value, '￥', 0);
                                },
                            }
                        },
                        z: 9,
                    }],
                    color: ['#40c3f9', '#ffbf53'],

                });
            },
        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        .public-header-content {
            margin: 50px 0;
            border-radius: 5px;
            overflow: hidden;
            >.container {
                background: #fff;
                > .header {
                    font-size: 20px;
                    color: #000;
                    text-indent: 20px;
                    padding: 15px 0;
                    border-bottom: 1px solid #e5e5e7;
                    > i {
                        width: 5px;
                        height: 26px;
                        float: left;
                        background: #00b6ef;
                    }
                }
                > .content {
                    width: 100%;
                    padding: 40px 0;
                    >.left-box{
                        >h3{
                            font-size: 20px;
                            color: #000;
                            text-align: center;
                            margin: 0 0 30px 0;
                        }
                        >article{
                            width: 100%;
                            border: 1px solid #dfe3e6;
                            margin-top: 30px;
                            >aside{
                                width: 100%;
                                height: 60px;
                                line-height: 60px;
                                border-bottom: 1px solid #dfe3e6;
                                overflow: hidden;
                                >h5{
                                    width: 25%;
                                    font-size: 15px;
                                    color: #000;
                                    text-align: center;
                                    border-right: 1px solid #dfe3e6;
                                }
                                >div.right{
                                    text-align: center;
                                    width: 75%;
                                    position: relative;
                                    padding: 0 30px;
                                    >div{
                                        width: 100%;
                                        text-indent: 10px;
                                    }
                                }
                            }
                            >aside:last-of-type{
                                border: none;
                            }
                        }
                    }
                    >.right-box{
                        position: relative;
                        >h3{
                            font-size: 20px;
                            color: #000;
                            text-align: center;
                            margin: 0 0 30px 0;
                        }
                        >p{
                            font-size: 14px;
                            color: #000;
                            text-align: center;
                            margin-top: 4px;
                        }
                        >div.chart-div{
                            width: 100%;
                            height: 250px;
                        }
                    }
                }
            }
        }
    }
</style>
